<template>
  <el-dialog v-model="visible" :title="title" width="520" show-footer show-zoom resize :close-on-click-modal="false"
    :close-on-press-escape="false" @close="close">
    <template #default>
      <el-form ref="formRef" :rules="rules" :model="form" label-align="right" label-width="120" size="default"
        label-position="top">
        <el-form-item label="SKU" prop="sku">
          <div class="flex">
            <el-input style="width: 400px;" v-model="form.sku" placeholder="请输入SKU" @change="changeSku"
              :disabled="form.id"></el-input>
            <el-switch class="ml-2" v-model="form.status" inline-prompt active-text="启用" inactive-text="禁用"
              :active-value='1' :inactive-value='0' />
          </div>
        </el-form-item>
        <el-form-item label="第三方SKU" prop="fn_sku">
          <el-input v-model="form.fn_sku" placeholder="请输入第三方SKU" :disabled="form.id"></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input type="textarea" v-model="form.sku_cn_title" placeholder="请输入商品名称" disabled></el-input>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="所属平台">
              <el-select v-model="form.platform" placeholder="请选择所属平台" :disabled="form.id">
                <el-option v-for="item in props.options['base.warehouse']?.[0].wmsPlatformType" :key="item.value"
                  :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否同步">
              <el-select v-model="form.is_sync" placeholder="请选择" :disabled="form.id">
                <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否默认">
              <el-select v-model="form.is_default" placeholder="请选择">
                <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <template #footer>
      <div class="flex justify-center py-2">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="save(formRef)">保 存</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="ComModal">
import { getWareSKUDetail, saveWareSku, updateWareSku } from '../api/index'
import { getBaseSku } from '@/api/public'
import { reactive, ref, toRefs, getCurrentInstance } from 'vue'
import { ElMessage } from 'element-plus'

const visible = ref(false)
const loading = ref(false)
const formRef = ref(null)
const emits = defineEmits(['query'])

const props = defineProps({
  options: {
    type: Object,
    default: {}
  }
})

const statusOptions = [
  {
    label: '是',
    value: 1
  },
  {
    label: '否',
    value: 0
  },
]


const data = reactive({
  form: {},
  title: '新增',
  handleType: null,
  rules: {
    sku: [{
      required: true, message: '请输入sku', trigger: 'blur'
    }],
    fn_sku: [{
      required: true, message: '请选择第三方SKU', trigger: 'blur'
    }],
  },
  wareDataList: [],
  floorList: []
})
const { form, title, handleType, rules, wareDataList, floorList } = toRefs(data)

const statusMap = new Map([
  ['add', '新增'],
  ['edit', '编辑'],
  ['view', '查看'],
])

const open = (type, id) => {
  title.value = statusMap.get(type)
  handleType.value = type
  visible.value = true
  if (id) getDetail(id)
}

const initForm = () => {
  form.value = getForm()
}
// 初始化
const getForm = () => {
  return {}
}

onMounted(() => {
  initForm()
})

const getDetail = async (id) => {
  try {
    const res = await getWareSKUDetail({
      id
    })
    form.value = res.data
  } catch (e) {
    throw Error(e)
  }
}

const changeSku = async () => {
  try {
    const res = await getBaseSku({
      sku: form.value.sku
    })
    form.value.fn_sku = res.data.sku
    form.value.sku_cn_title = res.data.sku_cn_title
    form.value.custom_sku = res.data.custom_sku
    form.value.base_sku_code = res.data.base_sku_code
  } catch (e) {
    throw Error(e)
  }
}

const save = () => {
  if (!formRef.value) return
  formRef.value.validate((valid) => {
    if (valid) {
      loading.value = true
      if (form.value.id) {
        updateWareSku(form.value)
          .then((res) => {
            ElMessage.success(res.message)
            emits('query')
            close()
          })
          .finally((e) => {
            loading.value = false
          })
      } else {
        saveWareSku(form.value)
          .then((res) => {
            ElMessage.success(res.message)
            emits('query')
            close()
          })
          .finally((e) => {
            loading.value = false
          })
      }
    }
  })
}
const close = () => {
  initForm()
  visible.value = false
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
.borderNone {
  :deep(.el-input__wrapper) {
    border: none;
    box-shadow: none
  }
}
</style>
